<div fxLayout="row wrap" fxLayoutGap="24px grid">
  <div fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <mat-card>
      <mat-card-title>注册</mat-card-title>
      <mat-card-content>
        <form [formGroup]="registerFrom" (ngSubmit)="onSubmit()">
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的用户名" formControlName="username" required minlength="4" maxlength="10">
            <mat-error *ngIf="formErrors.username">{{formErrors.username}}</mat-error>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的邮箱" formControlName="email" required>
            <mat-error *ngIf="formErrors.email">{{formErrors.email}}</mat-error>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的密码" formControlName="password" [type]="hide ? 'password' : 'text'"
              required>
            <mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility' : 'visibility_off'}}</mat-icon>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请再次输入您的密码" formControlName="password_confirm" required>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请输入您的手机" formControlName="phone" minlength="11" maxlength="11">
            <mat-hint align="end">{{registerFrom.value.phone?.length || 0}}/11</mat-hint>
          </mat-form-field>
          <mat-checkbox class="form-check" formControlName="agree">我同意</mat-checkbox>
          <button mat-raised-button color="primary" type="submit" [disabled]="!registerFrom.valid">提交</button>
          <button mat-raised-button color="default" type="button" (click)="rebuildForm()">清空</button>
        </form>

        <p>{{registerFrom.value | json}}</p>
      </mat-card-content>
    </mat-card>
  </div>

  <div fxFlex.lt-md="50" fxFlex.lt-sm="100">
    <mat-card>
      <mat-card-title>联系方式</mat-card-title>
      <mat-card-content>
        <form #formContact="ngForm">
          <mat-form-field class="display-block">
            <input matInput placeholder="您的名字" name="name" ngModel required minlength="4" maxlength="10">
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="您的邮箱" name="email" ngModel required>
          </mat-form-field>
          <mat-form-field class="display-block">
            <input matInput placeholder="请您的网址" name="website ngModel" required>
          </mat-form-field>
          <mat-form-field class="display-block">
            <textarea matInput placeholder="留言" rows="3" name="message" ngModel required></textarea>
          </mat-form-field>
          <mat-checkbox class="form-check">我同意</mat-checkbox>
          <button mat-raised-button color="primary" type="submit" [disabled]="!formContact.valid">提交</button>
        </form>
      </mat-card-content>
    </mat-card>
  </div>
</div>